<template>
  <div class="CPT_Apps">
    <div class="apps">
      <div
        v-for="it in apps"
        :key="it.name"
        :title="it.meta.label"
        @dblclick="toOpen(it)"
        @click="toActive(it.name)"
        class="app flexMode flexV hb vc"
        @contextmenu.prevent="e => showRmenu(e, it)"
        :class="[level, deskActiveApp === it.name ? 'active' : '']"
      >
        <div class="icon">
          <Icon :meta="it.meta" />
        </div>
        <span class="label txt-nowrap">{{ it.meta.label }}</span>
      </div>
      <div
        class="mask"
        @click="toActive('')"
        @contextmenu.stop.prevent="showDeskRmenu"
      />
    </div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "CPT_Apps",
  computed: {
    deskActiveApp() {
      return this.$store.state.desk.deskActiveApp
    },
  },
  data() {
    return {
      apps: [],
      level: "", //视图大小等级 20220106未实现
      active: "", //选中状态
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.apps = this.$apps.filter(it => !it.meta.hide)
      let level = localStorage.getItem("level")
      this.level = level || ""
    },
    toActive(v) {
      this.$store.commit("desk/saveData", { aim: "deskActiveApp", dt: v })
    },
    toOpen(it) {
      this.$store.dispatch("desk/openWindow", it)
    },
    showRmenu(aim, it) {
      const that = this
      const btn = [
        {
          icon: "open",
          iconType: "colorful",
          label: "打开",
          cb() {
            that.toOpen(it)
          },
        },
      ]
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
    showDeskRmenu(aim) {
      const that = this
      const btn = [
        {
          icon: "create-blue",
          label: "新建",
          children: [
            {
              icon: "",
              label: "快捷入口",
            },
            {
              icon: "",
              label: "待办",
            },
            {
              icon: "",
              label: "明日任务",
            },
          ],
        },
        {
          icon: "view",
          label: "查看",
          children: [
            {
              icon: "",
              label: "大图标",
              cb() {
                console.info("查看大图标")
              },
            },
            {
              icon: "",
              label: "中图标",
              cb() {
                console.info("查看中图标")
              },
            },
            {
              icon: "",
              label: "小图标",
              cb() {
                console.info("查看小图标")
              },
            },
          ],
        },
        {
          icon: "refresh",
          label: "刷新",
          cb() {
            window.location.reload()
          },
        },
        {
          icon: "setting",
          label: "设置",
        },
      ]
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
  },
}
</script>
<style lang="scss" scoped>
.CPT_Apps {
  height: 100%;
  width: 100%;
  overflow: hidden;
  .openloading {
    cursor: progress;
  }
}
.apps {
  height: 100%;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  .app {
    padding: $dis5 0;
    width: 4rem;
    height: 5rem;
    margin: $dis5 $dis10;
    overflow: hidden;
    transition: background-color 0.1s linear, border-color 0.1s linear;
    border: 1px transparent solid;
    position: relative;
    z-index: 2;
    &.active {
      background-color: rgba(255, 255, 255, 0.2);
      border-color: $littleBlue;
      z-index: 3;
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: $littleBlue;
      z-index: 3;
    }
    .icon {
      font-size: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .label {
      font-size: 12px;
      color: #fff;
      text-shadow: #333 0 1px 2px, #333 0 -1px 2px;
    }
  }
}
</style>
